<template>
  <h1>{{ sum }}</h1>
  <button @click="sum += 1">sum++</button>
  <hr>
  <h1>X[{{p.x}}]Y[{{p.y}}]</h1>
</template>

<script>
// https://www.bilibili.com/video/BV1Zy4y1K7SH?p=149&spm_id_from=pageDriver&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de

//2022 09 04 0:42
//https://www.bilibili.com/video/BV1Zy4y1K7SH?p=150&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de
/* 
 setup的两个注意点
    setup执行的时机
    在beforeCreate之前执行一次,this是undefined。
    setup的参数
    props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。
    context: 上下文对象
    attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs .- slots:收到的插槽内容,相当于this.$slots .
    emit:分发自定义事件的函数,相当于this.$emit 。

*/
import { ref, onMounted,onUnmounted,reactive} from "vue";
import usePoint from '../hooks/usePoint'
export default {
  name: "Demo",
  setup(props, context) {
    let sum = ref(0);
    let p=usePoint();
    return {
      sum,
      p
    };
  },
};
</script>

<style scoped>
</style>